<template>
  <div class="right_box">
    <dv-border-box-12 style="height: 100%; width: 100%">
      <div id="rightall">
        <span id="span-title">网-排水官网</span>
        <el-tabs v-model="activeName" @tab-click="handleClick" id="tabsactive">
          <!-- 总井点数 -->
          <div class="box">
            <el-tab-pane label="总井点数" name="first">
              <div id="chartjing"></div>
              <div class="title">
                <div class="titlebox">
                  <div class="titleA" v-for="(v, i) in from.titleone" :key="i">
                    <span>{{ v.name }}</span>
                  </div>
                </div>
                <div class="numbox">
                  <div class="titleA-num" v-for="(v, i) in from.arrlist" :key="i">
                    <span class="num">{{ v.arr }}个</span>
                  </div>
                </div>
              </div>
              <div class="yuandian-box">
                <div id="yuandian-myself1" @click="funjinga" tabindex="1"></div>
                <div id="yuandian-myself2" @click="funjingb" tabindex="2"></div>
              </div>
            </el-tab-pane>
          </div>
          <!-- 总管渠长 -->
          <div class="boxb">
            <el-tab-pane label="总管渠长" name="second">
              <div id="chartguan"></div>
              <div class="title">
                <div class="titlebox">
                  <div class="titleA" v-for="(v, i) in from.guanqutitle" :key="i">
                    <span>{{ v.name }}</span>
                  </div>
                </div>
                <div class="numbox">
                  <div class="titleA-num" v-for="(v, i) in from.arrguanqu" :key="i">
                    <span class="num">{{ v.arr }}个</span>
                  </div>
                </div>
              </div>
              <div class="yuandian-box">
                <div id="yuandian-myself" @click="guanqua" tabindex="1"></div>
                <div id="yuandian-myself" @click="guanqub" tabindex="2"></div>
                <div id="yuandian-myself" @click="guanquc" tabindex="3"></div>
              </div>
            </el-tab-pane>
          </div>
          <!-- 管道长度 -->
          <div class="boxc">
            <el-tab-pane label="管道长度" name="third">
              <div id="chartguandao"></div>
              <div class="title">
                <div class="titlebox">
                  <div class="titleA" v-for="(v, i) in from.pipelinetitle" :key="i">
                    <span>{{ v.name }}</span>
                  </div>
                </div>
                <div class="numbox">
                  <div class="titleA-num" v-for="(v, i) in from.pipelineArrList" :key="i">
                    <span class="num">{{ v.arr }}km</span>
                  </div>
                </div>
              </div>
              <div class="yuandian-box">
                <div id="yuandian-myself" @click="pipelineLengthA" tabindex="1"></div>
                <div id="yuandian-myself" @click="pipelineLengthB" tabindex="2"></div>
                <div id="yuandian-myself" @click="pipelineLengthC" tabindex="3"></div>
                <div id="yuandian-myself" @click="pipelineLengthD" tabindex="4"></div>
                <div id="yuandian-myself" @click="pipelineLengthE" tabindex="5"></div>
                <div id="yuandian-myself" @click="pipelineLengthF" tabindex="6"></div>
              </div>
            </el-tab-pane>
          </div>
          <!--井点检测 -->
          <div class="boxd">
            <el-tab-pane label="井点检测" name="fourth">
              <div id="chartjingdian"></div>
              <div class="title">
                <div class="titlebox">
                  <div class="titleA" v-for="(v, i) in from.welltitle" :key="i">
                    <span>{{ v.name }}</span>
                  </div>
                </div>
                <div class="numbox">
                  <div class="titleA-num" v-for="(v, i) in from.wellArrList" :key="i">
                    <span class="num">{{ v.arr }}个</span>
                  </div>
                </div>
              </div>
              <div class="yuandian-box">
                <div id="yuandian-myself" @click="jingdianLengthA" tabindex="1"></div>
                <div id="yuandian-myself" @click="jingdianLengthB" tabindex="2"></div>
                <div id="yuandian-myself" @click="jingdianLengthC" tabindex="3"></div>
                <div id="yuandian-myself" @click="jingdianLengthD" tabindex="4"></div>
              </div>
            </el-tab-pane>
          </div>
        </el-tabs>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { onMounted } from "vue";
import * as echarts from "echarts";
import { netStatistics } from "@/api/home/index";
// import * as echarts from "echarts";
// import { WellPointNum, PipeChannels } from "../../methods/index";
var internalInstance = getCurrentInstance();
const from = reactive({
  alljing: "",
  // 总井点数文字数字替换
  titleone: [
    { name: "总井数" },
    { name: "总箅子数" },
    { name: "总特征点数" },
    { name: "总排口数" },
  ],
  titletwo: [
    { name: "雨水井点" },
    { name: "污水井点" },
    { name: "合流井点" },
    { name: "截流井点" },
  ],
  arrlist: [],
  arrlisttwo: [],
  // 总管渠长文字替换
  guanqutitle: [
    { name: "总管道长" },
    { name: "总明沟长" },
    { name: "总暗渠长" },
    { name: "总暗涵长" },
  ],
  guanqutitletwo: [
    { name: "总雨水管渠长" },
    { name: "总污水管渠长" },
    { name: "总河流管渠长" },
    { name: "总截流管渠长" },
  ],
  guanqutitlethree: [
    { name: "总市证管渠长" },
    { name: "总小区管渠长" },
    { name: "城中村管渠长" },
  ],
  arrguanqu: [],
  arrguanqutwo: [],
  arrguanquthree: [],
  // 管道长度数据替换
  pipelinetitle: [
    { name: "CCTV检测" },
    { name: "qv检测" },
    { name: "待检测" },
    { name: "无需检测" },
  ],
  pipelinetitleTwo: [
    { name: "功能性1.2级" },
    { name: "功能性3.4级" },
    { name: "结构性1.2级" },
    { name: "结构型3.4级" },
    // { name: "正常管段" },
  ],
  pipelinetitleThree: [
    { name: "养护1.2级" },
    { name: "养护3.4级" },
    { name: "修复1.2级" },
    { name: "修复3.4级" },
  ],
  pipelinetitleFour: [
    { name: "总管道长" },
    { name: "总明沟长" },
    { name: "总暗渠长" },
    { name: "总暗涵长" },
  ],
  pipelinetitleFive: [
    { name: "总雨水管渠长" },
    { name: "总污水管渠长" },
    { name: "总合流管渠长" },
    { name: "总截流管渠长" },
  ],
  pipelinetitleSix: [
    { name: "总市政管渠长" },
    { name: "总小区管渠长" },
    { name: "城中村管渠长" },
  ],
  pipelineArrList: [],
  pipelineArrListTwo: [],
  pipelineArrListThree: [],
  pipelineArrListFour: [],
  pipelineArrListFive: [],
  pipelineArrListSix: [],
  // 井点检测
  welltitle: [
    { name: "检查井已检测" },
    { name: "箅子已检测" },
    { name: "检查井待检测" },
    { name: "箅子待检测" },
  ],
  welltitleTwo: [
    { name: "问题井数" },
    { name: "问题箅数" },
    { name: "正常井数" },
    { name: "正常箅数" },
  ],
  welltitleThree: [
    { name: "雨水井/箅检测" },
    { name: "污水井/箅检测" },
    { name: "合流井/箅检测" },
    { name: "截流井/箅检测" },
  ],
  welltitleFour: [
    { name: "市政井/箅检测" },
    { name: "小区井/箅检测" },
    { name: "城中村井/箅检测" },
  ],
  wellArrList: [],
  wellArrListTwo: [],
  wellArrListThree: [],
  wellArrListFour: [],
});
// console.log(from.arrlist,'llll');
onMounted(() => {
  // 排水官网统计请求
  netStatistics().then((res) => {
    // console.log(res, "排水官网统计数据");
    from.alljing = res.data;
    // 使用for in循环遍历对象的属性
    for (let key in from.alljing) {
      if (
        key == "zjsCnt" ||
        key == "zbsCnt" ||
        key == "ztzdCnt" ||
        key == "zpkCnt"
      ) {
        // 把属性名和属性值添加到option.series[0].data数组中
        echartlist.push({ name: key, value: from.alljing[key] });
        // let arr=from.alljing[key]
        // 数字添加到from.arrlist中
        from.arrlist.push({ arr: from.alljing[key] });

        // console.log(from.arrlist,'kk');
      } else if (
        key == "ysjdCnt" ||
        key == "wsgdCnt" ||
        key == "hljdCnt" ||
        key == "jljdCnt"
      ) {
        // 把属性名和属性值添加到option.series[0].data数组中
        twoechartlist.push({ name: key, value: from.alljing[key] });
        from.arrlisttwo.push({ arr: from.alljing[key] });
        // console.log(from.alljing[key],'2');
      }
      // ========================下面是总管渠长的数据===================
      else if (
        key == "zgdLength" ||
        key == "zmgLength" ||
        key == "zaqLength" ||
        key == "zahLength"
      ) {
        // 把属性名和属性值添加到echartguan数组中
        echartguan.push({ name: key, value: from.alljing[key] });
        from.arrguanqu.push({ arr: from.alljing[key] });
        // console.log(echartguan,'4744');
      } else if (
        key == "zysgqLength" ||
        key == "zwsgqLength" ||
        key == "zhlgqLength" ||
        key == "zjlgqLength"
      ) {
        // 把属性名和属性值添加到echartguantwo数组中
        echartguantwo.push({ name: key, value: from.alljing[key] });
        from.arrguanqutwo.push({ arr: from.alljing[key] });
      } else if (
        key == "zszgqLength" ||
        key == "zxqgqLength" ||
        key == "czcgqLength"
      ) {
        // 把属性名和属性值添加到echartguanthree数组中
        echartguanthree.push({ name: key, value: from.alljing[key] });
        from.arrguanquthree.push({ arr: from.alljing[key] });
      }
      // --------下面是管道长度数据--------------
      else if (
        key == "cctvLength" ||
        key == "qvLength" ||
        key == "djcLength" ||
        key == "wxjcLength"
      ) {
        // 把属性名和属性值添加到echartguandao数组中
        echartguandao.push({ name: key, value: from.alljing[key] });
        from.pipelineArrList.push({ arr: from.alljing[key] });
      } else if (
        key == "glx12Length" ||
        key == "glx34Length" ||
        key == "jgx12Length" ||
        key == "jgx34Length" ||
        key == "zgdLength"
      ) {
        // 把属性名和属性值添加到数组中
        echartguandaoTwo.push({ name: key, value: from.alljing[key] });
        from.pipelineArrListTwo.push({ arr: from.alljing[key] });
        // console.log(from.pipelineArrListTwo,'55');
      } else if (
        key == "yh12Length" ||
        key == "yh34Length" ||
        key == "xf12Length" ||
        key == "xf34Length"
      ) {
        // 把属性名和属性值添加到数组中
        echartguandaoThree.push({ name: key, value: from.alljing[key] });
        from.pipelineArrListThree.push({ arr: from.alljing[key] });
        // console.log(from.pipelineArrListTwo,'55');
      } else if (
        key == "jczgdLength" ||
        key == "jczmgLength" ||
        key == "jczaqLength" ||
        key == "jczahLength"
      ) {
        // 把属性名和属性值添加到数组中
        echartguandaoFour.push({ name: key, value: from.alljing[key] });
        from.pipelineArrListFour.push({ arr: from.alljing[key] });
        // console.log(from.pipelineArrListTwo,'55');
      } else if (
        key == "jczysgqLength" ||
        key == "jczwsgqLength" ||
        key == "jczhlgqLength" ||
        key == "jczjlgqLength"
      ) {
        // 把属性名和属性值添加到数组中
        echartguandaoFive.push({ name: key, value: from.alljing[key] });
        from.pipelineArrListFive.push({ arr: from.alljing[key] });
        // console.log(from.pipelineArrListTwo,'55');
      } else if (
        key == "jczszgqLength" ||
        key == "jczxqgqLength" ||
        key == "jcczcgqLength"
      ) {
        // 把属性名和属性值添加到数组中
        echartguandaoSix.push({ name: key, value: from.alljing[key] });
        from.pipelineArrListSix.push({ arr: from.alljing[key] });
        // console.log(from.pipelineArrListTwo,'55');
      }
      // 井点检测
      else if (
        key == "jcjyjcCnt" ||
        key == "bzyjcCnt" ||
        key == "bzdjcCnt" ||
        key == "jcjdjcCnt"
      ) {
        // 把属性名和属性值添加到数组中
        echartjingdian.push({ name: key, value: from.alljing[key] });
        from.wellArrList.push({ arr: from.alljing[key] });
        // console.log(echartjingdian,'55');
      } else if (
        key == "wtjCnt" ||
        key == "wtbCnt" ||
        key == "zcjCnt" ||
        key == "zcbCnt"
      ) {
        // 把属性名和属性值添加到数组中
        echartjingdianTwo.push({ name: key, value: from.alljing[key] });
        from.wellArrListTwo.push({ arr: from.alljing[key] });
        // console.log(echartjingdian,'55');
      } else if (
        key == "ysjbjcCnt" ||
        key == "wsjbjcCnt" ||
        key == "hljbjcCnt" ||
        key == "jljbjcCnt"
      ) {
        // 把属性名和属性值添加到数组中
        echartjingdianThree.push({ name: key, value: from.alljing[key] });
        from.wellArrListThree.push({ arr: from.alljing[key] });
        // console.log(echartjingdian,'55');
      } else if (
        key == "szjbjcCnt" ||
        key == "xqjbjcCnt" ||
        key == "czcjjcCnt"
      ) {
        // 把属性名和属性值添加到数组中
        echartjingdianFour.push({ name: key, value: from.alljing[key] });
        from.wellArrListFour.push({ arr: from.alljing[key] });
        // console.log(echartjingdian,'55');
      }
      // 调用setOption方法更新图表
      myChart.setOption(option);
      mycharta.setOption(option1);
      mychartb.setOption(option2);
      mychartc.setOption(option3);
    }
  });
  // ===========总井点数=========
  echarta();
  //=======总管渠长========
  echartb();
  // echartb();
  //=============总管道长==============
  echartc();
  echartd();
});
// echarts图初始数据数据
let echartlist = reactive([]);
let twoechartlist = reactive([]);
// 点击第一个小圆点
function funjinga() {
  echartlist.length = 0;

}
// 点击第二个小圆点
function funjingb() {
  // 替换echarts图数据
  echartlist.length = 0;
  echartlist = twoechartlist;
  console.log(twoechartlist, "5555");
  // 替换数字数据
  from.arrlist.length = 0;
  from.arrlist = from.arrlisttwo;
  // 替换文字数据
  from.titleone.length = 0;
  from.titleone = from.titletwo;
  // echartlist.push(twoechartlist) ;
  internalInstance.ctx.$forceUpdate();
  echarta();
}
// 总井点数
var myChart;
var option;
function echarta() {
  if (myChart != null && myChart != "" && myChart != undefined) {
    myChart.dispose(); //销毁
  }
  myChart = echarts.init(document.querySelector("#chartjing"));

  // let data=echartlist;
  option = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "总井点数",
      left: "center",
      top: "30%",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: false,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "80%"],
        center: ["50%", "35%"],
        type: "pie",
        data: echartlist,
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };
  myChart.setOption(option);
}
const activeName = ref("first");
// const handleClick = (tab, event) => {
//   console.log(tab, event,'444');

// };
// ------------------------总管渠长------------------------------
// 总管渠长echarts图初始数据数据
let echartguan = reactive([]);
let echartguantwo = reactive([]);
let echartguanthree = reactive([]);
// 第二个点击圆点点击事件
function guanqub() {
  // 替换echarts图数据
  echartguan.length = 0;
  echartguan = echartguantwo;
  // 替换文字信息
  from.guanqutitle.length = 0;
  from.guanqutitle = from.guanqutitletwo;
  // 替换数字信息
  from.arrguanqu = 0;
  from.arrguanqu = from.arrguanqutwo;
  internalInstance.ctx.$forceUpdate();
  echartb();
}
// 第三个小圆点点击事件
function guanquc() {
  echartguan.length = 0;
  echartguan = echartguanthree;
  // 第三个小圆点替换文字
  from.guanqutitle.length = 0;
  from.guanqutitle = from.guanqutitlethree;
  // 替换数字
  from.arrguanqu = 0;
  from.arrguanqu = from.arrguanquthree;
  internalInstance.ctx.$forceUpdate();
  echartb();
}
var mycharta;
var option1;
function echartb() {
  if (mycharta != null && mycharta != "" && mycharta != undefined) {
    mycharta.dispose(); //销毁
  }
  mycharta = echarts.init(document.querySelector("#chartguan"));

  option1 = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "总管渠长",
      left: "center",
      top: "30%",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "80%"],
        center: ["50%", "35%"],
        type: "pie",
        data: echartguan,
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };
  mycharta.setOption(option1);
}
// ------------------------总管道长------------------------------
// 总管道长echarts图初始数据数据
let echartguandao = reactive([]);
let echartguandaoTwo = reactive([]);
let echartguandaoThree = reactive([]);
let echartguandaoFour = reactive([]);
let echartguandaoFive = reactive([]);
let echartguandaoSix = reactive([]);
// 第二个点击圆点点击事件
function pipelineLengthB() {
  // 替换文字信息
  from.pipelinetitle.length = 0;
  from.pipelinetitle = from.pipelinetitleTwo;
  // 替换数字信息
  from.pipelineArrList.length = 0;
  from.pipelineArrList = from.pipelineArrListTwo;
  // 替换echarts图数据
  echartguandao.length = 0;
  echartguandao = echartguandaoTwo;
  internalInstance.ctx.$forceUpdate();
  echartc();
}
//第三个小圆点点击事件
function pipelineLengthC() {
  // 替换文字信息
  from.pipelinetitle.length = 0;
  from.pipelinetitle = from.pipelinetitleThree;
  // 替换数字信息
  from.pipelineArrList.length = 0;
  from.pipelineArrList = from.pipelineArrListThree;
  // 替换echarts图数据
  echartguandao.length = 0;
  echartguandao = echartguandaoThree;
  internalInstance.ctx.$forceUpdate();
  echartc();
}
//第4个小圆点点击事件
function pipelineLengthD() {
  // 替换文字信息
  from.pipelinetitle.length = 0;
  from.pipelinetitle = from.pipelinetitleFour;
  // 替换数字信息
  from.pipelineArrList.length = 0;
  from.pipelineArrList = from.pipelineArrListFour;
  // 替换echarts图数据
  echartguandao.length = 0;
  echartguandao = echartguandaoFour;
  internalInstance.ctx.$forceUpdate();
  echartc();
}
//第5个小圆点点击事件
function pipelineLengthE() {
  // 替换文字信息
  from.pipelinetitle.length = 0;
  from.pipelinetitle = from.pipelinetitleFive;
  // 替换数字信息
  from.pipelineArrList.length = 0;
  from.pipelineArrList = from.pipelineArrListFive;
  // 替换echarts图数据
  echartguandao.length = 0;
  echartguandao = echartguandaoFive;
  internalInstance.ctx.$forceUpdate();
  echartc();
}
//第6个小圆点点击事件
function pipelineLengthF() {
  // 替换文字信息
  from.pipelinetitle.length = 0;
  from.pipelinetitle = from.pipelinetitleSix;
  // 替换数字信息
  from.pipelineArrList.length = 0;
  from.pipelineArrList = from.pipelineArrListSix;
  // 替换echarts图数据
  echartguandao.length = 0;
  echartguandao = echartguandaoSix;
  internalInstance.ctx.$forceUpdate();
  echartc();
}
var mychartb;
var option2;
function echartc() {
  if (mychartb != null && mychartb != "" && mychartb != undefined) {
    mychartb.dispose(); //销毁
  }
  mychartb = echarts.init(document.querySelector("#chartguandao"));

  option2 = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "管道长度",
      left: "center",
      top: "30%",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "80%"],
        center: ["50%", "35%"],
        type: "pie",
        data: echartguandao,
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };
  mychartb.setOption(option2);
}
// ------------------------井点检测------------------------------
// 总管道长echarts图初始数据数据
let echartjingdian = reactive([]);
let echartjingdianTwo = reactive([]);
let echartjingdianThree = reactive([]);
let echartjingdianFour = reactive([]);

// 第二个点击圆点点击事件
function jingdianLengthB() {
  // 替换文字信息
  from.welltitle.length = 0;
  from.welltitle = from.welltitleTwo;
  // 替换数字信息
  from.wellArrList.length = 0;
  from.wellArrList = from.wellArrListTwo;
  // 替换echarts图数据
  echartjingdian.length = 0;
  echartjingdian = echartjingdianTwo;
  internalInstance.ctx.$forceUpdate();
  echartd();
}
//第三个小圆点点击事件
function jingdianLengthC() {
  // 替换文字信息
  from.welltitle.length = 0;
  from.welltitle = from.welltitleThree;
  // 替换数字信息
  from.wellArrList.length = 0;
  from.wellArrList = from.wellArrListThree;
  // 替换echarts图数据
  echartjingdian.length = 0;
  echartjingdian = echartjingdianThree;
  internalInstance.ctx.$forceUpdate();
  echartd();
}
//第4个小圆点点击事件
function jingdianLengthD() {
  // 替换文字信息
  from.welltitle.length = 0;
  from.welltitle = from.welltitleFour;
  // 替换数字信息
  from.wellArrList.length = 0;
  from.wellArrList = from.wellArrListFour;
  // 替换echarts图数据
  echartjingdian.length = 0;
  echartjingdian = echartjingdianFour;
  internalInstance.ctx.$forceUpdate();
  echartd();
}

var mychartc;
var option3;
function echartd() {
  if (mychartc != null && mychartc != "" && mychartc != undefined) {
    mychartb.dispose(); //销毁
  }
  mychartc = echarts.init(document.querySelector("#chartjingdian"));

  option3 = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "井点检测",
      left: "center",
      top: "30%",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "80%"],
        center: ["50%", "35%"],
        type: "pie",
        data: echartjingdian,
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };
  mychartc.setOption(option3);
}
</script>

<style scoped>
#yuandian-myself:focus {
  background-color: rgb(18, 133, 87);
}

.right_box {
  /* width: 344px;
  height: 350px; */
  width: 85%;
  height: 33%;
  /* background-color: #14181e; */
  margin: 20px 0 20px 20px;
  box-sizing: border-box;
  border-radius: 6%;
  position: relative;
}

#rightall {
  height: 100%;
  width: 96%;
  background: rgba(4, 14, 17, 0.7);
  border-radius: 2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#span-title {
  color: rgb(251, 250, 250);
  font-weight: 600;
  font-size: 16px;
  margin: 15px;
  font-family: SimHei;
}

.demo-tabs {
  margin-left: 3px;
  width: 98%;
  height: 89%;
  /* background: linear-gradient(to right, #111a1f, #2f6e68); */
  color: white;
}

.box,
.boxb,
.boxc,
.boxd {
  width: 100%;
  height: 90%;
  color: #fff;
}

#pane-first,
#pane-second,
#pane-third,
#pane-fourth {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: space-between;
}

/* echarts图大小 */
#chartjing {
  width: 40%;
  height: 240px;
}

#chartguan {
  width: 130px;
  height: 240px;
}

#chartguandao {
  width: 130px;
  height: 240px;
}

#chartjingdian {
  width: 130px;
  height: 240px;
}

.title {
  width: 55%;
  height: 200px;
  /* background-color: yellowgreen; */
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}

.titleA {
  width: 86px;
  height: 40px;
  /* border: 3px solid #5b928c; */
  border-bottom: 3px solid #5b928c;
  border-top: 3px solid #5b928c;
  border-left: 3px solid #5b928c;
  margin-top: 5px;
  box-sizing: border-box;
  /* padding: 10px 0px 0 0px; */
  /* line-height: 30px; */
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  color: white;
  display: flex;
  /* justify-content: space-between; */

  flex-direction: column-reverse;
}

.titleA-num {
  width: 80px;
  height: 40px;
  /* border: 3px solid #5b928c; */
  border-bottom: 3px solid #5b928c;
  border-top: 3px solid #5b928c;
  border-right: 3px solid #5b928c;
  margin-top: 5px;
  box-sizing: border-box;
  /* padding: 10px 0px 0 0px; */
  line-height: 30px;
  /* line-height: 40px; */
  font-size: 12px;
  text-align: center;
  color: white;
  box-sizing: border-box;
}

.num {
  color: #33fce4;
}

.titleB {
  width: 150px;
  height: 40px;
  border: 3px solid #4fb6ac;
  margin-bottom: 10px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: white;
}

.yuandian-box {
  width: 120px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 60px;
  left: 0px;
}

#yuandian-myself {
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
</style>